<!DOCTYPE html>
<html>
  <head>
    <script src="../../../../processing.js"></script>
    <link rel="stylesheet" href="../../../style.css" />
  </head> 

  <body> 
    <h1><a href="http://asalga.wordpress.com">Andor Salga</a></h1>
    <h2>Test for <a href="https://processing-js.lighthouseapp.com/projects/41284-processingjs/tickets/277-canvas-size-difference-issue">bug 277</a></h2>

    <p>This page tests the fix for <a href="https://processing-js.lighthouseapp.com/projects/41284-processingjs/tickets/277-canvas-size-difference-issue">bug277</a> in <a href="http://processingjs.org/">Processing.js</a><br />
      This page creates a canvas without a width and height and attempts to<br />
      load a sketch which uses a call to size(100,100,P3D). That is, the dimensions in the HTML<br />
      and Processing sketch are <b>not</b> the same in this test case.<br />
      Also, instead of using the <b>datasrc</b> attribute, this page calls <b>Processing(canvas, source);</b><br />
      <br />
      If a sphere is rendered in the canvas, the test has passed.<br />
    </p>

    <p>
      <canvas id="cvs"> </canvas>
      <script>
        var cvs = document.getElementById('cvs');
        var AJAX = new window.XMLHttpRequest();
        AJAX.open("GET", "test.pjs", false);
        AJAX.send(null);
        Processing(cvs, AJAX.responseText);
      </script>
    </p>
    
    <pre>
<b>// Test from Processing.org</b>
import processing.opengl.*;

void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(33,66,99);
  translate(width/2, height/2, 0);
  sphere(30);
}</pre>

  </body>
</html>
